<template>
  <div id="home">
    <!-- <nav-bar class="home-nav"><div slot="center">首页</div></nav-bar> -->
    <nav-bar class="home-nav"
      ><template v-slot:center><div>首页</div></template></nav-bar
    >
    <tab-control
      :titles="titles"
      @tabClick="tabClick"
      v-show="isTabControlShow"
      ref="tabcontrol1"
    ></tab-control>
    <scroll
      class="wrapper"
      ref="scroll"
      :probe-type="3"
      :pullUpLoad="true"
      :observeImage="true"
      @scrollPlace="scrollPlace"
      @loadMore="loadMore"
    >
      <home-swiper
        :banner="banner"
        class="homeswiper"
        @loadFinish="loadFinish"
      ></home-swiper>
      <home-rec :recommend="recommend"></home-rec>
      <week-popular></week-popular>
      <tab-control
        :titles="titles"
        @tabClick="tabClick"
        ref="tabcontrol2"
      ></tab-control>
      <goods-list :goods="getCurrentGoods"></goods-list>
    </scroll>
    <back-top @click.native="backtopClick" v-show="isBackTopShow"></back-top>
  </div>
</template>

<script>
import NavBar from "components/common/NavBar/NavBar.vue";
import HomeSwiper from "./components/HomeSwiper.vue";
import HomeRec from "./components/HomeRec.vue";
import WeekPopular from "./components/WeekPopular.vue";
import TabControl from "components/content/TabControl.vue";
import GoodsList from "components/content/Good/GoodsList.vue";
// import BackTop from "components/common/BackTopBtn/BackTop.vue";
import Scroll from "../../components/common/BetterScroll/Scroll.vue";

import { getHomeItem, getHomeGoods } from "network/home.js";
import { debounce } from "common/utils.js";
import { backTopClick } from "common/mixin.js";

export default {
  name: "Index",
  components: {
    NavBar,
    HomeSwiper,
    HomeRec,
    WeekPopular,
    TabControl,
    GoodsList,
    Scroll,
    // BackTop,
  },
  mixins: [backTopClick],
  data() {
    return {
      banner: [],
      recommend: [],
      titles: ["流行", "新款", "精选"],
      goods: {
        pop: { page: 0, list: [] },
        new: { page: 0, list: [] },
        sell: { page: 0, list: [] },
      },
      currentGoods: "pop",
      // isBackTopShow: false,
      isTabControlShow: false,
      tabbarOffset: 0,
      currentY: 0,
    };
  },
  created() {
    this.getHomeItem();
    this.getHomeGoods("pop");
    this.getHomeGoods("new");
    this.getHomeGoods("sell");

    //监听图片加载
    //有可能在create内使用，scroll未挂载，可以将其放到mounted内
    // this.$bus.$on("imageLoad", () => {
    //   this.$refs.scroll.imageRefresh();
    // });
  },
  mounted() {
    //这里这样做，主要是为了time=null，返回一个函数，如果用下面注释的方法，那就是不断的将timer=null，最终还是全部执行
    const refresh = debounce(this.$refs.scroll.imageRefresh, 300);
    // console.log(refresh);
    this.$bus.$on("imageLoad", () => {
      // this.debounce(this.$refs.scroll.imageRefresh, 300)();
      // this.$refs.scroll.imageRefresh();
      //为了防抖，500ms内执行一次
      refresh();
    });
    // console.log(this.$refs.scroll);
    //这里挂载el的话，可能还没加载完图片，可以在nextTick中
    // this.tabbarOffset = this.$refs.tabbar.$el.offsetTop;
    // this.tabbarOffset = this.$refs.tabbar.$el.offsetTop;
    // console.log(this.tabbarOffset);
  },
  activated() {
    // console.log(this.currentY,this.isTabControlShow);
    this.$refs.scroll.scrollToPlace(0, this.currentY, 0);
  },
  deactivated() {
    this.currentY = this.currentY;
    // console.log(this.currentY,this.isTabControlShow);
  },
  computed: {
    getCurrentGoods() {
      return this.goods[this.currentGoods].list;
    },
  },
  methods: {
    /**
     * 网络请求
     */
    getHomeItem() {
      //多包装一层放在methods里，让creat更简洁
      getHomeItem().then((res) => {
        // console.log(res);
        //防止垃圾回收后将res指向的对象回收，虽然res会被回收
        //有指向有调用就不会回收
        this.banner = res.data.data.banner.list;
        this.recommend = res.data.data.recommend.list;
      });
    },
    getHomeGoods(type) {
      const page = this.goods.page + 1;
      // getHomeGoods(type, page).then((res) => {
      getHomeGoods(type, page).then((res) => {
        // console.log(res);
        //这里应该用‘塞’的方式，传进数组，不能直接赋值覆盖
        // this.goods[type].list = res.data.data.list
        //push方法要好好看看，是怎么push的，不能直接放进去，要结构，合并后再放，否则会将要传入的整个数组打包成一个元素传入
        //还有concat连接数组
        this.goods[type].list.push(...res.data.data.list);
        this.goods[type].page += 1;

        //封装的函数，BS上拉加载必须执行一遍这个才能继续上拉加载
        this.$refs.scroll.finishPullUp();
      });
    },

    /**
     * 事件监听
     */
    tabClick(index) {
      switch (index) {
        case 0:
          this.currentGoods = "pop";
          break;
        case 1:
          this.currentGoods = "new";
          break;
        case 2:
          this.currentGoods = "sell";
          break;
      }

      this.$refs.tabcontrol1.currentIndex = index;
      this.$refs.tabcontrol2.currentIndex = index;
    },
    //这里把backtopClick抽到了mixin内
    // backtopClick() {
    //   //直接拿scroll对象，并调用其方法。这个不算是父传子，也不算子传父，算是父直接拿子
    //   //500毫秒回到顶部
    //   // this.$refs.scroll.scroll.scrollTo(0, 0, 500);
    //   //由于上述不太好理解，为什么scroll组件还要再scroll呢？别人不看scroll组件可能不知道我定义了一个scroll，为此在scroll内定义一个method
    //   this.$refs.scroll.scrollToPlace(0, 0, 500);
    // },
    scrollPlace(position) {
      // position.y < -300
      //   ? (this.isBackTopShow = true)
      //   : (this.isBackTopShow = false);
      this.currentY = position.y;
      this.isBackTopShow = position.y < -1000;
      this.isTabControlShow = position.y < -this.tabbarOffset + 44;
    },
    loadMore() {
      // console.log(this.currentGoods);
      this.getHomeGoods(this.currentGoods);
    },
    loadFinish() {
      this.tabbarOffset = this.$refs.tabcontrol2.$el.offsetTop;
    },
  },
};
</script>

<style scoped>
.home-nav {
  background-color: #ff8e96;
  color: #fff;
  z-index: 99;
}
/* .copyTabControl {
  display: none;
} */
.homeswiper {
  padding-top: 43px;
}
.tabControl {
  position: sticky;
  /* position: fixed; */
  width: 100%;
  top: 43px;
}
.wrapper {
  height: calc(100% - 49px);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
</style>